<template>
  <div
    :disabled="disabled"
    :class="`textButton ${disabled ? 'disabled-' : 'text-'}${type}`"
    @click="handleClick"
    :style="buttonStyle"
  >
    <slot />
  </div>
</template>

<script>
export default {
  name: 'DTextButton',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'primary'
    },
    buttonStyle: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleClick(e) {
      if (!this.disabled) {
        this.$emit('click', e);
      }
    }
  }
};
</script>

<style lang="scss">
.textButton {
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.text-primary {
  color: #2174e1;
}
.text-primary:hover {
  color: #4b8ee5;
}
.text-error {
  color: #d74343;
}
.text-error:hover {
  color: #df6969;
}
.disabled-primary {
  color: #90baf0 !important;
}
.disabled-error {
  color: #eba1a1 !important;
}
</style>
